Hello and welcome to this lecture.
In this lecture all will be created.
The stylin for the app with C S S.
I have got my text editor opened and I'll be writing my C Ss inside here.
You can see if God is here says file.
They highlight highlighted the way this lecture is going to work.
I'm going to add a chunk of could each time and then explain the code to you.
I think you create more value to me just explain it could put to you rather than you watch me type and
take up so much time.
I have added some code from line 1 to lying he leaven sule.
When you are applying styling we see SS You need to first of four identify the element you're trying
to start.
Just like going to barber You you here will be the limit.
So here in this case the I.D. calculator is the target here.
So if we Popol that I hate email file.
Notice here the form here is called a calculator.
The I.D..
With csx.
You identify an I.D. with the hash symbol and when you write it.
Make sure there are no gaps between the tag hash tag and the name saroyan quickly.
True.
The stores here saw every store every element use Tao mozz act as a selector also in this case.
The idea is the selector.
And then you you place the property as the property is what you want to style and then you have the
value and you separate the property from the value with a call on it's considered column there.
So what I'm saying is that I want the background column on line to and one of the background colour
for the catlett are to be this value.
So this is a Hexa decimal value.
This is a Web site I use.
A lot is just the address here for the website so you have to friend x values here.
So if you're not sure what the actual column names are you can use the hex decimal values which are
preceded with the hash tag here.
So this is where I got most of my colours fun and you have to end your your statement with a call on.
So once you finish this timeline once you've identified the property and the value you now ended with
this semicolon without the semicolon it will not work again.
Line 3 here is there with I have set there with to 450 pixels.
That's how wide how 1 the calculator form to be the height.
Given the 350 pixels the law in the is the colour of the text or any text thatll be typed in will be
white.
So that is the value for white in Hexa value padding in refers to this space inside the element.
So I've given a 5 to 5 pixels with padding.
You can apply padding to all four corners so you've got a top the right the bottom on the left so is
applied in that order whereby you specified a single value like a specified 55 pixels.
It was applied in the order of top right bottom left and you can remember that using the word trouble.
Taking out the vowels Wisha the holes left leaves you with.
Top right bottom left border style means you don't want any stylin on the border so that's why I've
set it to none bodied radials.
I've said lead to 25 pixels on line.
My body radios is what gives the form a bit of a rounded corner.
Okay so play around with these values and see how your form looks margin.
What margin does margin refers to the space outside.
Why padding refers to the space inside.
So what I'm saying is that I want the margin from the top to drop 50 pixels or right again.
Margin is similar to padded in terms of how you apply it is top right bottom left so we have one value
specified it will be applied to top right bottom left.
Okay.
NOTE Is I use margin or tool or tool will automatically to the margin automatically.
Okay will top right bottom left Israeli dissenter's it.
Use on line 11 added another margin from the top just to make sure if the form is dropped down from
the top I don't want it too high.
That's what that does.
I have added some more tags here.
Styling.
So from line 14 to line twenty seven line 14 here.
Is this dialling in for the input so the actual input.
So I have set it to float to the right of the container which of the form you can move right and clipboard
property on line 17 makes avoids the implied input pillowman from colliding.
So where there is a coalition it will separate the coalition does on either side.
That's what they claim.
Both means I've said to with online 18 height on 19 marjane on 20 text a line means I want the text
to be centred.
That's the property and then line 22 font which means I wanted to be bold.
That's what font word means.
You can set it to be bold or out line 25 is the paragraph element the piece noun for paragraph.
So I'm styling the power grab with a font size of 35 pixels.
I have added some more styling here from line twenty eight all the way down to line 14 right.
So let's have a look at this actrix This idea actually bit here.
So this add up here is the actual button that or the impled tab that you use when you add up.
So are my playing style into that so this is the standing I've given it a background call with this
value border style.
I don't want no stylin on the border.
Border radios have explained what that and got the wave height of Carlotta Quello RAF refers to the
text that you type inside that input.
Okay font sizes the artle size of the text and then margin refers to the space around the element so
thin that from the right I want the margin to come down.
Hundred and twenty pixels.
So does this time mean for the ADD UP idea and then we've caught the hate one element which is the heading.
So this is estaminet given to the text font size 6 to 5 pixels text lying carlaw Giving it that to apply.
If that is how online 44 is a comment anything that's a comment is neglected by a web browser and a
stylin is not applied.
So if you want to troubleshoot something you can just use this Asterix to troubleshoot.
So that line 44 here would not apply because I have commented it out line 46 to 49 basis on the idea
quad percent and I've applied it column to it just a colour.
That's what the property I am assigning to this Heidi and I've given it a hex value.
So this percent.
Let's see what is the percent if we go back here.
The percent here is the actual span element.
Okay so the span element.
I'm giving it an idea of a percent.
So one part as plans used to join to test to get out so this part here will be giving a separate quote
from this on the part.
That's what this stylee is doing here.
So let's see it for this tiling.
If I say this.
Okay so this this what they document looks like I did my MBA up so if I refresh this style should be
applied.
Okay.
So you can see now with the styling it looks a little bit prettier or key.
So you can't do anything with it.
You can see here you can type stuff but nothing will work.
I'll say because I have not implemented the Jabr script.
So if I do that and type in that pressing calculate nothing would work.
Also notice I can't type anything in here and anything in here because once you calculate the value
will be popped into this.
The disable note is where we were equating the input element.
I use a disabled attribute in the hastier male parts.
So that's what this does.
It prevents you from clicking or add in something to this two inputs.
Okay this to impose would be populated.
Once you've completed the values that's sit for this lecture.
Thank you so much for watching.
Bye for now.
The next leg Chair will implement the functionality using a query which is a javascript library.